<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chat one on one</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" type="text/css" href="./../css/style.css" />
<link rel="stylesheet" type="text/css" href="./../css/user-card.css" />
<link rel="stylesheet" type="text/css" href="./../css/avatars.css" />
<link rel="stylesheet" type="text/css" href="./../css/icons.css" />
<link rel="stylesheet" type="text/css" href="./../css/buttons.css" />
<link rel="stylesheet" type="text/css" href="./../css/dropdowns.css" />
<link rel="stylesheet" type="text/css" href="./../css/popups.css" />
<link rel="stylesheet" type="text/css" href="./../css/chat-messages.css" />
<link rel="stylesheet" type="text/css" href="./../css/chat-textarea.css" />
<link rel="stylesheet" type="text/css" href="./../css/chat-typing.css" />
<link rel="stylesheet" type="text/css" href="./../css/chat-left-pane.css" />
<link rel="stylesheet" type="text/css" href="./../css/chat-feedback.css" />
<link rel="stylesheet" type="text/css" href="./../css/chat-common.css" />
<link rel="stylesheet" type="text/css" href="./../css/onboarding.css" />
    <script type="text/javascript" src="./../js/vendor/jquery-2.2.1.js"></script>
    <script type="text/javascript" src="./../js/vendor/jquery-ui-1.11.4.js"></script>
    <script type="text/javascript" src="./../js/jquery.misc.js"></script>
    <script type="text/javascript" src="./../js/ui/miniui.js"></script>
    <script>
        $(document).ready(function() {
            uiCheckboxes($('.onboarding-dialog .checkbox-block'));

            $('.onboarding').on('click', function() {
                var hide = function() {
                    var $dialog = $('.onboarding-dialog');
                    $dialog.removeClass('active');
                    $dialog.removeClass('animate-in');
                    $dialog.addClass('animate-out');
                    $('.onboarding')
                            .removeClass('active')
                            .addClass('animate-hide')
                            .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
                                $('.onboarding').remove();
                            });
                    $dialog.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
                        $dialog.removeClass('animate-out');
                        $dialog.addClass('hidden');
                    });
                };

                $('.onboarding-dialog .fm-dialog-close').rebind('click.onboarding', function() {
                    hide();
                });

                var $dialog = $('.onboarding-dialog');

                if (!$dialog.is(".active")) {
                    $dialog.css({
                        'top': 'auto',
                        'left': 'auto',
                    });

                    $dialog.position({
                        of: $('.onboarding'),
                        my: "left-2 top-2",
                        at: "right-55% center-2px"
                    });
                    $dialog.removeClass('hidden');
                    $dialog.removeClass('fadeout');
                    $dialog.addClass('active');
                    $dialog.addClass('animate-in');
                    $dialog.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
                        $dialog.removeClass('animate-in');
                    });


                    $('.onboarding').addClass("active");
                }
                else {
                    hide();
                }
            });
        });
    </script>
</head>

<body>

<div class="onboarding">
    <div class="wrapper"><div class="main"></div></div>
    <div class="outer"></div>
</div>

<div class="fm-dialog onboarding-dialog hidden">
    <div class="fm-dialog-close"></div>
    <img class="left" src="screenshot.png" />
    <h3>Chat</h3>
    <p>
        Take advantage of the most secure end-to-end encrypted audio and video chat built in Mega. Chat with with your collaborators and stay safe.
    </p>
    <label>
        <input type="checkbox" />
    </label>
    <div class="checkbox-block">
        <div class="checkdiv checkboxOff">
            <input type="checkbox" name="disable-hints-checkbox" id="disable-hints-checkbox" class="checkboxOff">
        </div>
        <label for="disable-hints-checkbox" class="radio-txt">Disable future hints</label>
    </div>
</div>


<div class="fmholder" id="fmholder">
  <div class="top-head"></div>
  <div class="fm-main default">
    <div class="nw-fm-left-icons-panel">
          <div class="nw-fm-left-icon cloud-drive"></div>
          <div class="nw-fm-left-icon shared-with-me"></div>
          <div class="nw-fm-left-icon contacts"></div>
          <div class="nw-fm-left-icon conversations active">
              <div class="nw-fm-left-border"></div>
          </div>
          <div class="nw-fm-left-icon rubbish-bin"></div>
          <div class="nw-fm-left-icon settings"></div>
          <div class="nw-fm-left-icon transfers"></div>
    </div>
    <div class="fm-left-panel">
    	<div class="left-pane-drag-handle"></div>
		<div class="fm-left-menu conversations">
            <div class="nw-fm-tree-header conversations"> 
            	<span>Chat</span>
                <div class="button"><i class="small-icon white-medium-plus"></i></div>
            </div>
		</div>
        <div class="fm-tree-panel">
            <div class="content-panel conversations active">
                
                <!-- Left Conversations List !--> 
            	<ul class="conversations-pane">
                    <li class="active">
                    	<div class="user-card-name conversation-name">
                            Bruce Schneier
                            <span class="user-card-presence online"></span>
                        </div>
                        <div class="conversation-message">Write a message...</div>
                        <div class="date-time">12:35 AM</div>
                    </li>
                    <li>
                    	<div class="user-card-name conversation-name">
                            Bruce Schneier
                            <span class="user-card-presence away"></span>
                        </div>
                        <!-- Unread messages counter !-->
                        <div class="unread-messages">
                        	2
                        </div>
                        <!-- Please add 'unread" classname !-->
                        <div class="conversation-message unread">Hey man, where are you?</div>
                        <div class="date-time">12:35 AM</div>
                    </li>
                    <li>
                    	<div class="user-card-name conversation-name">
                            Bruce Schneier
                            <span class="user-card-presence offline"></span>
                        </div>
                        <div class="conversation-message">Hey Ho, lets go</div>
                        <div class="date-time">12:35 AM</div>
                    </li>
                    <li>
                    	<div class="user-card-name conversation-name">
                            Bruce Schneier
                            <span class="user-card-presence online"></span>
                        </div>
                        <div class="conversation-message">Hahaha, no way. Long long long message!!</div>
                        <div class="date-time">Yesterday</div>
                    </li>
                </ul>
                <!-- Left Conversations List !--> 
                 
            </div>  
        </div>
    </div>
              
    <div class="fm-right-files-block">
        
        <!-- Chat content block !-->
        <div class="chat-content-block">
        
            <!-- Right contacts block !-->
            <div class="chat-right-area">
                <!-- jScrollPane block !-->
                <div class="chat-right-area conversation-details-scroll">
                    <div class="chat-right-pad">
            
                        <div class="contacts-info body">
                            <!-- Please add "online/away/busy/offline" classname !-->
                            <div class="user-card-presence online"></div>
                            <div class="small-rounded-avatar color6">B</div>
                            
                            <div class="default-white-button tiny-button">
                                <i class="tiny-icon grey-down-arrow"></i>
                            </div>
                            
                            <div class="user-card-data">
                                <div class="user-card-name">Bruce Schneider</div>
                                <div class="user-card-email">bs@mega.co.nz</div>
                            </div>
                        </div>
                        
                        <div class="buttons-block">
                            <div class="link-button">
                                <i class="small-icon audio-call"></i>
                                Start Audio Call
                            </div>
                            <div class="link-button">
                                <i class="small-icon video-call"></i>
                                Start Video Call
                            </div>
                            <div class="link-button">
                                <i class="small-icon rounded-grey-plus"></i>
                                Add participant...
                            </div>
                            <div class="link-button">
                                <i class="small-icon rounded-grey-up-arrow"></i>
                                Send Files...
                            </div>
                            <div class="link-button">
                                <i class="small-icon shared-grey-folder"></i>
                                Share Folders
                            </div>
                            <div class="link-button red">
                                <i class="small-icon rounded-stop"></i>
                                Leave Chat
                            </div>
                        </div>
                    
                    </div>
                </div>
                
                <div class="big-button button-with-border blue">
                    <i class="medium-icon dashed-conversation"></i>
                    Whisper mode
                </div>
                
            </div>
            <!-- End of Right contacts block !-->
        
            <!-- Messages component !-->
            <div class="messages-block">
            	
                <div class="messages scroll-area">
                	<div class="messages main-pad">
                    	<div class="messages content-area">
                        
                            <!-- No history information !-->
                            <div class="messages notification">
                                <div class="header">
                                    No chat history with <span>Bruce Schneier</span>
                                </div>
                                <div class="info">
                                    Text explaining MEGA's security model and the possibility of having OTR conversations, something specific enough, ideally between 160-200 characters in English.
                                </div>
                            </div>
                            <!-- End of No history information !-->
                       
                       </div> 
                    </div>
                </div>
                
                
                <!-- Chat textarea component !-->
                <div class="chat-textarea-block">
                	
                    <!-- Typing component !-->
                    <div class="typing-block">
                    	<div class="typing-text">Bruce is typing</div>
                        <div class="typing-bounce">
                            <div class="typing-bounce1"></div>
                            <div class="typing-bounce2"></div>
                            <div class="typing-bounce3"></div>
                        </div>
                    </div>
                    
                	<div class="chat-textarea">
                    	<i class="small-icon conversations"></i>
                        <div class="chat-textarea-buttons">
                            <div class="button popup-button">
                                <i class="small-icon smiling-face"></i>
                            </div>
                            <div class="button popup-button">
                                <i class="small-icon grey-medium-plus"></i>
                            </div>
                        </div>
                        <!-- Block for jScrollpane !-->
                        <div class="chat-textarea-scroll">
                        	<textarea name="messages-textarea" placeholder="Write a message..."></textarea>
                            <!-- Block for Clone of textarea content (for height detection) !-->
                            <div class="hidden"></div>
                        </div>
                    </div>
                </div>
                <!-- End of Chat textarea component !-->
                
                
            </div>
            <!-- End of Messages component !-->  
            
        </div>
        <!-- End of Chat content block !-->
    	
        
    </div>    

    
  </div>
</div>
  
</div>
</body>
</html>
